<template>
  <div>

    <div>
      <div class="container-left">
        <div class="panel">

          <el-link class="animate__animated  animate__bounceInUp" style="width: 700px; !important;"
                   :href="'/blogInfoById/'+item.articleId"
                   v-for="(item,index) in articleLasterList" :key="index">
            <el-card style="margin: 10px;width: 800px" shadow="hover">
              <el-row :gutter="10">
                <el-col :span="8">
                  <div style="overflow: hidden">
                    <el-image :src="item.articleCover" style="width: 100%;height: 230px" class="image"></el-image>
                  </div>
                </el-col>
                <el-col :span="16">
                  <!--todo 左对其-->
                  <div class="container-inner">
                    <ul class="panel-ul">
                      <li v-text="item.articleUsername"></li>
                      <li v-text="item.createTime" style="margin-left: 20px"></li>
                      <li v-text="item.articleClassify" style="margin-left: 20px"></li>
                    </ul>
                    <div class="panel-title">
                      <ul class="panel-content">
                        <li>
                          <h3 v-text="item.articleTitle"
                              style="margin: 0 0 10px 0;color: rgba(61, 62, 64, 0.9);font-family: SegoeUI;"></h3>
                        </li>
                        <li>
                          <span class="content-text" v-text="item.articleContent"></span>
                        </li>
                      </ul>
                    </div>
                    <div class="panel-fun">
                    <span class="panel-icon">
                      <img src="../../assets/icon/点赞.png" style="width: 25px"/>
                      <span v-text="item.articleLike"></span>
                    </span>
                      <span class="panel-icon">
                      <img src="../../assets/icon/浏览.png" style="width: 25px"/>
                      <span v-text="item.articleNum"></span>
                    </span>
                      <span class="panel-icon">
                      <img src="../../assets/icon/消息.png" style="width: 25px"/>
                      <span v-text="item.articleCommentNum"></span>
                    </span>
                    </div>
                  </div>
                </el-col>
              </el-row>
            </el-card>
          </el-link>
        </div>
      </div>

      <div class="container-right">

      </div>
    </div>
  </div>
</template>

<script>
import {getBlogInfoById, getNotLoginBlogCommendList} from "../../request/homeRequest";
import {getLaster} from "../../request/contentRequest";

export default {
  name: "Laster",
  data() {
    return {
      //推荐文章列表
      articleLasterList: [],
      username: '',
    }
  },

  methods: {
    /**
     * 用户登录的情况下,获取最新文章
     */
    getBlogLaster() {
      let pageSize = 15;
      let page = 1;

      //最新文章数据
      this.$contentReq.getLaster(page, pageSize).then((data) => {
        console.log('最新数据 = ', data)
        this.articleLasterList = data.records
      })
    },

  },

  created() {
    console.log('渲染额 推荐')

    this.getBlogLaster();
  }
}
</script>

<style scoped>
.content-text {
  display: block;
  height: 50px;
  overflow: hidden;
  color: rgb(147, 147, 147);
  text-overflow: ellipsis;
  white-space: nowrap;
}


.container-inner {
  width: 90%;
  min-height: 150px;

}

.panel-icon {
  margin: 20px 0 0 10px;
  display: inline-block;
}

.panel-fun {
  width: 90%;
  height: 50px;
  /*border: 1px solid #81ff36;*/
  margin: auto;
}

.panel-title {
  width: 90%;
  height: 80px;
  /*border: 1px solid royalblue;*/
  margin: auto;
}

.panel-ul {
  width: 90%;
  height: 30px;
  /*border: 1px solid royalblue;*/
  margin: auto;
}

.panel-ul > li {
  float: left;
  margin-left: 0px;
}

.panel {
  width: 90%;
  min-height: 100px;
  border-radius: 20px;
  margin: 10px auto 10px auto;
}

.container-left {
  width: 65%;
  min-height: 300px;
  /*border: 1px solid rebeccapurple;*/
  float: left;
}

.container-right {
  width: 30%;
  min-height: 300px;
  border: 1px solid rebeccapurple;
  float: right;
  border-radius: 20px;

}

/*
标签下的css特效去掉li自带的换行，加间距
*/
.ul > li {
  float: left;
  margin-left: 15px;
}

/*
li标签里名为的link都加间距
 */
.link {
  font-size: 20px;
}

.spot_one {
  width: 45%;
  height: 330px;
  border: 1px solid palegreen;
  float: left;

}

ul {
  list-style-type: none;
  padding-left: 5px;
  /*height:800px;overflow-y:scroll;*/
  /*height: 293px;*/
  overflow: auto
}

.spot_two {
  width: 45%;
  height: 330px;
  border: 1px solid rgba(152, 168, 251, 0.51);
  float: right;
}

.home_wrap {
  width: 80%;
  height: 150px;
  margin: auto;
  margin-top: 45px;
}

.tagsFont {
  font-family: Arial, 'Times New Roman', 'Microsoft YaHei', SimHei;
  font: bold 20px/0.95em Arial, 'Times New Roman', 'Microsoft YaHei', SimHei;
}

.head_tags {
  width: 100%;
  height: 150px;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
}


.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
</style>
